<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <h3 style="text-align: center">紧固件库</h3>
  <div id="FastenerChart" style="width: 100%;height: 300px;"></div>
</template>

<script setup>
// import * as VChart from '@visactor/vchart';
import VChart from '@visactor/vchart';
import { getFixationParamStatistics } from '@/api/statisticalAnalysis';
const CONTAINER_ID = ref('FastenerChart');
const chartData = ref([]);
const renderChart = () => {
  const spec = {
    type: 'pie',
    data: {
      id: 'id0',
      values: chartData.value,
    },
    outerRadius: 0.8,
    innerRadius: 0.5,
    padAngle: 0.6,
    valueField: 'totalCount',
    categoryField: 'title',
    pie: {
      style: {
        cornerRadius: 10
      },
      state: {
        hover: {
          outerRadius: 0.85,
          stroke: '#000',
          lineWidth: 1
        },
        selected: {
          outerRadius: 0.85,
          stroke: '#000',
          lineWidth: 1
        }
      }
    },
    legends: {
      visible: true
    },
    label: {
      visible: true,
      formatMethod: (label, data) => {
        return {
          type: 'rich',
          text: [
            {
              text: `${data.totalCount}\n`,
              fill: 'rgba(0, 0, 0, 0.92)',
              fontSize: 16,
              fontWeight: 500,
              stroke: false
            },
            {
              text: data.title,
              fill: 'rgba(0, 0, 0, 0.55)',
              fontSize: 12,
              fontWeight: 400,
              stroke: false
            }
          ]
        };
      },
      style: {
        wordBreak: 'break-word',
        maxHeight: 50
      }
    },
    tooltip: {
      mark: {
        content: [
          {
            key: datum => datum['title'],
            value: datum => datum['totalCount']
          }
        ]
      }
    }
  };
  const vchart = new VChart(spec, { dom: CONTAINER_ID.value });
  vchart.renderSync();

  // Just for the convenience of console debugging, DO NOT COPY!
  window['vchart'] = vchart;
}

const getStatisticsData = async () => {
  await getFixationParamStatistics().then(res => {
    chartData.value = res.data;
    renderChart();
  })
}
onMounted(() => {
  getStatisticsData();                           
});                                                                                   
                                                         
</script>

<style lang="scss" scoped>

</style>